﻿<template>
      <!--send box s-->
  <div class="reginster_wrap">
    <mt-button @click.native="popupVisible3 = true" size="large" ref="click_pop" class="hide">右侧弹出 popup</mt-button>
    <div class="finish_msg_title">
      用户注册
    </div>
    <!--<div class="input_base input_base_top" placeholder="" v-on:click.self="pop_show($event)" ref="school">
      {{select_school}}
    </div>-->

    <input class="input_base" placeholder="绑定手机号" type="number" ref="thom_m"/>
    <!-- 验证码s -->
    <div class="yanzhem_wrapper">
      <input class="input_base" placeholder="验证码" ref="yzm_ttt" type="text" />
      <div class="get_yzm" v-on:click ="get_yzm">
        <span v-if='data_yzm >= 0'> {{data_yzm}}秒后重试</span>
        <span v-bind:class="{time_font_s : data_yzm >= 0}" v-if='data_yzm=="获取验证码"'>{{data_yzm}}</span>
      </div>
    </div>
    <!-- 验证码 e-->
    <!-- 密码s -->
    <input class="input_base" placeholder="设置密码" ref="sec" type="password"/>
    <!-- 密码e -->
    <p class="input_list">
      点击下一步表示同意《用户协议》
    </p>
    <div class="next_step" v-on:click="next_f">注册</div>
    <mt-popup v-model="popupVisible3" position="right" class="mint-popup-3 pop_wraper" :modal="false">
      <input class="input_base pop_search" placeholder="输入学校"
             v-on:input="seach($event)" ref="search_vale"
             v-focus_ud:value='popupVisible3'
      />
      <div class="show_search_box" v-for="info in menu_list" v-on:click.self="change_address($event,info.id)">
        {{info.schoolName}}

      </div>
      <div v-if="menu_list_len_n" class="menu_list_len_n">
        没有匹配的消息
      </div>
      <mt-button @click.native="popupVisible3 = false" size="large" type="primary" class="close_pop">返回</mt-button>
    </mt-popup>
  </div>
</template>
<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import { Toast, Popup, MessageBox,Indicator } from 'mint-ui';
  import qs from "qs";
export default {
  name: 'hello',
  data () {
    return {
      get_layer_show: this.$store.getters.get_layer_show,
      popupVisible3:false,
      menu_list: [],
      select_school: "输入学校",
      school_id: "",
      isloading: false,
      menu_list_len_n:false,
      data_yzm:"获取验证码"
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
    "Change_certain_layer"
  ]),
  created:function(){
    this.$emit("back_hide",true);
  },
  mounted: function () {
     let mesg = this.$store.getters.get_user;
    this.$nextTick(() => {
      if (mesg.phone == undefined) return;
      this.$refs.phone.value = mesg.phone;
      this.$refs.sec.value = mesg.pwd;
      this.select_school = mesg.school_name
    })
    mui.plusReady(function () {
//      plus.navigator.setStatusBarBackground("#0f2441");
    })
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    if (to.path == "/Index_main/Wrap_certain_layer/Certain_layer" && this.popupVisible3 == true) {
      this.popupVisible3 = false;
      next(false)
    } else {
      next(true)
    }
  },
  components: {

  },
  methods: {
    ...mapMutations([
      "Change_user"
    ]),
   //验证码倒计时
   count_yzm:function(){
      this.data_yzm = 0;
      this.count_flag = true;
      let count_id = setInterval(()=>{
                            this.data_yzm += 1;
                            if(this.data_yzm == 60){
                                        clearInterval(count_id);
                                        this.count_flag = true;
                                        this.data_yzm = "获取验证码"
                             }

                     },1000)
  },
  //获取验证码
  get_yzm:function(){
  let thom_m_v = this.$refs.thom_m.value;
  if(thom_m_v == "" || thom_m_v ==null || thom_m_v == undefined){
    Toast({
            message: '请输入手机号',
            position: 'bottom',
            duration: 2000
          });
    return
  }
  if(this.count_flag){
    return
  }else{
   this.count_yzm()
  }
  //获取验证码
   this.$http.post('https://wx.yizhiweimeng.com/yizhiweimen/api/user/send/sms',
        qs.stringify(
        {
            mobile: thom_m_v
        }))
        .catch((thrown) => {
          //alert(thrown)
          console.log("获取验证吗——————————————————————")
          console.log("thrown")
          console.log(thrown)
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
         }).then((e) => {
           Toast({
            message: e.data,
            position: 'bottom',
            duration: 2000
           });

           mui.plusReady(() => {
             if (e.data == "注册成功！") {
               console.log("注册成功______________")
               plus.navigator.setStatusBarBackground("#9f5c2f");
               mui.openWindow({
                 url: "./app_index.html",
                 id: "app_index",
               });
             } else {
               console.log("注册失败")
             }
           })

         })
    },
    seach: function (e) {
      if (e.target.value == "") return;
      this.isloading = false;
      this.$http.post('https://wx.yizhiweimeng.com/yizhiweimen/api/user/school/getSchoolByName',
        qs.stringify(
        {
            name: e.target.value,
        }))
        .catch((thrown) => {
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });

        }).then((e) => {
            if(e.data.length == 0 ){
                this.menu_list_len_n = true;
                return
            }else{
                this.menu_list_len_n = false;

            }
          this.menu_list = e.data;

        })
    },
    change_address: function (e,id) {
      this.select_school = e.target.innerText;
      this.popupVisible3 = false;
      this.school_id = id;
    },
    pop_show: function (event) {
      this.$refs.click_pop.$el.click();
      this.$refs.click_pop.$el.blur();
      this.menu_list = [];
      this.menu_list_len_n = false;
      this.$refs.search_vale.value = "";
      setTimeout(() => {
        this.$refs.search_vale.focus();
      },0)
    },
    //页面跳转
    certain_jump: function () {
      this.$store.dispatch("thom_redirect",{name:"/letter/SucLetter",router:this.$router});
    },
    hid_layer:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    login:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Index_main",router:this.$router
        });
    },
    goto_register:function () {
      this.$store.dispatch("thom_redirect",
        {
          name:"/Login/Register",router:this.$router
        });
    },
    next_f: function () {
      let phone = this.$refs.thom_m.value
      let sec = this.$refs.sec.value
      let yzm = this.$refs.yzm_ttt.value

      if (phone == "") {
        Toast("请输入手机号");
        return false;
      } else if (!(/^1[34578]\d{9}$/.test(phone))) {
        Toast("手机号码有误，请重填");
        return false;
      } else if (sec == "") {
        Toast("请输入密码");
        return false;
      } else if(yzm == ""){
        Toast("请输入验证骂");
        return false;
      }
      //设置user 提交
     //注册 开始s
    Indicator.open();
    this.$http.post('https://wx.yizhiweimeng.com/yizhiweimen/api/user/appRegister',
        qs.stringify(
        {
            phone:phone,
              sec:sec,
              code:yzm
        }))
        .catch((thrown) => {
          Indicator.close()
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });

        }).then((e) => {
            Indicator.close();
           //mui 跳转
           Toast({
             message: e.data,
             position: 'bottom',
             duration: 2000
            });
             //eee
            if(e.data == "注册成功！"){
                 mui.plusReady(function(){
                          console.log("当前页面URL："+plus.webview.currentWebview().getURL());
                          mui.openWindow({
                          url: "./app_index.html",
                          id: "app_index",
                          styles: {                             // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置

                          }
                        });
            })
  }
            //eeeeeeeeee
        })
      },
  }
  }

</script>
<style>
  /*验证码s*/
  .time_font_s{
    font-size:4vw;
  }
  .yanzhem_wrapper{
    position:relative;
  }
  .get_yzm{
    position:absolute;
    right:0;
    top:50%;
    transform:translate(-70%,-50%);
    border:2px solid #9f5c2f;
    border-radius:1vw;
    text-align:center;
    padding:1vw 0.5vw;
    color:#9f5c2f;
    font-size:3vw;
  }
  /*验证码e*/
  .menu_list_len_n {
    font-size: 6vw;
    color: #9f5c2f;
    margin-top: 2vw;
  }
  .mint-indicator-mask {
    z-index: 3000;
  }
</style>
<style scoped>
  @component-namespace page {
    @component indicator {
      @descendent wrapper {
        padding: 0 20px;
        position: absolute 50% * * *;
        width: 100%;
        transform: translateY(-50%);

        button:not(:last-child) {
          margin-bottom: 20px;
        }
      }
    }
  }
  .load {
    position: absolute;
    top: 0;
    z-index:4000;
  }
  .mint-button {
    border-radius: 0;
  }
  .show_search_box {
    width: 80%;
    height: 2rem;
    line-height: 2rem;
    text-align: left;
    font-size: 0.6rem;
    border-bottom: 1px solid #9f5c2f;
    margin: 0.2rem auto;
    letter-spacing: 1px;
  }
  .mint-popup .pop_search {
    border-radius: 0;
    padding: 0;
    padding-left: 6%;
    // box-shadow: 0 2px 6px 2px #9f5c2f;
    width: 94%;
    border-bottom: 2px solid #9f5c2f;
    margin: 0;
    height:10vw;
    line-height: 10vw;
    font-size: 5vw;
    color: #9f5a30;
    font-weight:600;
    letter-spacing:1px;
  }
  /*close_pop s*/
  .close_pop {
    background-color:#9f5c2f;
    position: fixed;
    bottom: 0;
  }
  /*close_pop e*/
  /*pop_wraper s*/
  .hide {
    position: absolute;
    top: 0;
    z-index: -1;
    opacity: 0;
  }
  .pop_wraper {
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
  /*pop_wrapper e*/
  /*finish_msg s*/
  .login_header_left {
    width: 7.2vw;
  }
  .login_wrap .login_header_left {
    margin: 1rem 0 0 6%;
    width: 7.2vw;
  }
  .login_wrap .login_header_right {
    margin: 0.8rem 6% 0 0;
  }
  .next_step {
    width: 86%;
    height: 9.3vw;
    line-height: 9.3vw;
    background-color: #9f5c2f;
    color: #fff;
    margin: 0 auto;
    border-radius: 2vw;
    font-size: 4vw;
  }
  .input_list {
    margin-bottom: 0.8rem;
    color: #fff;
    font-size:2.5vw;
    font-weight: 600;
    text-align:left;
    color:#9f5c2f;
    padding-left:10vw;
  }
  .reginster_wrap .input_base_top {
    color: #9f5c2f;
    text-align: left;
    //padding-left:6%;
    font-weight: 600;
    height:9.3vw;
    line-height:9.3vw;
  }
  .input_base::-webkit-input-placeholder {
    color: #9f5c2f;
    text-align: left;
    font-weight: 600;
    padding-left: 0%;
  }

  .input_base:-moz-placeholder {
    text-align: left;
    color: #9f5c2f;
    font-weight: 600;
    padding-left:0%;
  }

  .input_base:-ms-input-placeholder {
    text-align: left;
    /* IE10+ */
    color: #9f5c2f;
    font-weight: 600;
    padding-left:0%;
  }
  .input_base {
    padding: 0;
    padding-left: 6%;
    outline: none;
    display: block;
    width: 80%;
    height: 9.3vw;
    line-height: 9.3vw;
    background-color: #fff;
    border-radius: 2vw;
    margin: 0 auto 2.6vw;
    font-size: 0.6rem;
    color: #9f5c2f;
    font-size:3vw;
    border:1px solid #9f5c2f;

  }
  .finish_msg_title {
    font-size: 4vw;
    color: #9f5c2f;
    width: 22.4vw;
    height: 7.3vw;
    line-height: 7.3vw;
    text-align: center;
    color: #9f5a30;
    background-color: #fff;
    margin: 0.6rem auto 1.1rem;
    border-radius: 2vw;
    letter-spacing: 1px;
    font-weight: 700;
  }
 /*finish_msg e*/
  .reginster_wrap {
    width: 100%;
    height: 100%;
  }
.certain_btn_inner{
  border:2px solid #9f5c2f;
  width: 86%;
  height: 2rem;
  line-height: 2rem;
  color: #ffffff;
  background-color: #9f5c2f;
  text-align: center;
  border-radius: 2vw;
  margin: 0 auto;
}
.inner_main_input{
  padding-right:6%;
  width: 74%;
}
*::-webkit-input-placeholder {
  text-align: center;
}

*:-moz-placeholder {
  text-align: center;
}

*:-ms-input-placeholder {
  text-align: center;
}

/*bottom_btn*/
.bottom_btn{
  width: 8rem;
  transform:translateX(-50%) ;
  position: absolute;
  bottom: 1.85rem;
  left:50%;
}

.bottom_left_btn{
  float: left;
  width: 3.5rem;
  height: 1rem;
  line-height:1.8;
  text-align: center;
  color: #9f5c2f;
  font-size: 0.6rem;
  background-color: #ffffff;
  border-radius: 1.4vw;
  letter-spacing: 1px;
}
.mid_line{
  margin-left: 0.35rem;
  margin-right: 0.35rem;
  float: left;
  width: 2px;
  background-color: #9f5c2f;
}
</style>

